<template>
	<view class="page">
		<uni-section title="实时数据" type="line"></uni-section>
		<view class="detail-main-ul">
			<view class="li-top">
				<view>
					牲畜 :
					<text>{{ hog.houseName }}</text><text>/</text>
					<text>{{ hog.coteName }}</text><text>/</text>
					<text>{{ hog.code }}</text>
				</view>
				<view v-if="hog.isOnline==1" class="tag_isonline online">在线</view>
				<view v-else class="tag_isonline offline">离线</view>
			</view>
			<view class="li-main">
				<view>
					<view class="li-main-image"><image src="../../static/image/temperature.png" mode=""></image></view>
					<view class="li-main-text">
						温度 :
						<text>{{hog.temperature}}°C</text>
					</view>
				</view>
				<view>
					<view class="li-main-image"><image src="../../static/image/signal.png"></image></view>
					<view class="li-main-text">
						信号 :
						<text>{{hog.signalStrength}}</text>
					</view>
				</view>
				<view>
					<view class="li-main-image"><image src="../../static/image/voltage.png"></image></view>
					<view class="li-main-text">
						电压 :
						<text>{{hog.voltage}}</text>
					</view>
				</view>
			</view>
			<view class="li-bottom">
				ICCID :
				<text>{{hog.iccid}}</text>
			</view>
			<view class="li-bottom">
				上传时间 :
				<text>{{hog.timeLastActive}}</text>
			</view>
		</view>
		
		<uni-section title="历史曲线" type="line"></uni-section>
		<view class="detail-chart">
			<!-- #ifdef APP-PLUS || H5 -->
			<view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" id="echarts" class="echarts"></view>
			<!-- #endif -->
			<!-- #ifndef APP-PLUS || H5 -->
			<view>非 APP、H5 环境不支持</view>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
import uniSection from '@/components/uni-section/uni-section.vue'
export default {
	components: {
		uniSection
	},
	data() {
		return {
			hog: {},
			hogId: 0,
			option: {
        legend: {},
        tooltip: {
            trigger: 'axis'
        },
        dataset: {source: [] },
        xAxis: {type: 'category'},
        yAxis: {gridIndex: 0},
        series: [
            {type: 'line', smooth: true, seriesLayoutBy: 'row'},
            {type: 'line', smooth: true, seriesLayoutBy: 'row'},
            {type: 'line', smooth: true, seriesLayoutBy: 'row'}
        ]
			}
		}
	},
	onLoad(e) {
		this.hogId = e.id
		this.loadData()
		this.loadChart()
	},
	onPullDownRefresh() {
		// 下拉刷新
		this.loadData()
		this.loadChart()
		uni.stopPullDownRefresh();
	},
	methods: {
		loadData: function() {
			this.$u.api.getRealtimeDetail(this.hogId).then( res => {
				this.hog = res.data;
			})
		},
		loadChart: function() {
			this.$u.api.getHistoryList(this.hogId).then( res => {
				this.option.dataset.source = res.data;
			})
		},
		onViewClick(options) {
			console.log(options)
		}
	}
}
</script>

<script module="echarts" lang="renderjs">
	let myChart
	export default {
		mounted() {
			if (typeof window.echarts === 'function') {
				this.initEcharts()
			} else {
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script')
				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
				script.src = 'static/echarts.min.js'
				script.onload = this.initEcharts.bind(this)
				document.head.appendChild(script)
			}
		},
		methods: {
			initEcharts() {
				myChart = echarts.init(document.getElementById('echarts'))
				// 观测更新的数据在 view 层可以直接访问到
				myChart.setOption(this.option)
			},
			updateEcharts(newValue, oldValue, ownerInstance, instance) {
				// 监听 service 层数据变更
				myChart.setOption(newValue)
			},
			onClick(event, ownerInstance) {
				// 调用 service 层的方法
				ownerInstance.callMethod('onViewClick', {
					test: 'test'
				})
			}
		}
	}
</script>

<style lang="scss">
	
/* 列表样式 */
.detail-main-ul {
	box-sizing: border-box;
	width: 100%;
	height: 210px;
}

.li-top {
	box-sizing: border-box;
	color: #999999;
	padding: 0 30rpx 0 30rpx;
	width: 100%;
	height: 40px;
	line-height: 40px;
	display: flex;
	justify-content: space-between;
	background-color: #ffffff;

	view {
		text {
			padding-left: 2px;
			padding-right: 2px;
			color: #05ac9d;
		}
	}

	.tag_isonline {
		font-size: $uni-font-size-sm;
		margin-top: 10px;
		border-radius: 12rpx;
		height: 20px;
		line-height: 20px;
		padding: 0 12rpx 0 12rpx;
	}

	.online {
		background-color: $uni-color-primary;
		color: $uni-text-color-inverse;
	}

	.offline {
		background-color: $uni-bg-color-grey;
		color: $uni-text-color-grey;
	}
}

.li-main {
	width: 100%;
	height: 170rpx;
	margin-top: 3rpx;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
}

.li-main view {
	background-color: #ffffff;
	flex: 1;
}

.li-main view:nth-child(2) {
	margin-left: 2rpx;
	margin-right: 2rpx;
}

.li-main-image image {
	width: 65rpx;
	height: 65rpx;
	margin-top: 30rpx;
	margin-left: 87rpx;
}

.li-main-text {
	text-align: center;
	font-size: 14px;
}

.li-bottom {
	box-sizing: border-box;
	width: 750rpx;
	height: 80rpx;
	line-height: 80rpx;
	margin-top: 3rpx;
	background-color: #ffffff;
	padding-left: 30rpx;
	color: #999999;
	font-size: 13px;
}

/* 页面图表 */
.detail-chart {
	background-color: #FFFFFF;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.echarts {
	margin-top: 20px;
	width: 100%;
	height: 300px;
}
</style>
